<template>
    <div class="home-page">
        <div class="title"></div>
        <div>
            <FieldItem
                v-for="(item, k) in proto"
                :key="k"
                :dataKey="k"
                :item="item"
            />
        </div>

        <div class="footer">
            <div class="label">提交说明</div>
            <el-input v-model="submitInfo"></el-input>
        </div>

        <el-button class="btn-submit" type="primary" @click="onConfirmSubmit"
            >确认提交</el-button
        >
    </div>
</template>

<script>
import proto from "@/proto/home";

import FieldItem from "@/components/fieldItem/index";
export default {
    components: {
        FieldItem
    },
    props: {
        msg: String
    },
    data() {
        return {
            proto: proto,
            configData: {},
            submitInfo: ""
        };
    },
    created() {
        Object.keys(proto).forEach(k => {
            this.configData[k] = proto[k].value || null;
        });

        console.log(
            "编辑页面",
            this.$route.params,
            this.$route.query,
            this.configData
        );

        this.$bus.$on("update_config_data", ({ key, newValue }) => {
            console.log("数据更新", key, newValue);
            this.configData[key] = newValue;
        });
    },
    methods: {
        onConfirmSubmit() {
            console.log("确认提交", this.configData);
        }
    }
};
</script>

<style scoped lang="less">
.home-page {
    box-sizing: border-box;
    font-size: 16px;
    height: 100vh;
    padding: 30px 30px;

    .footer {
        padding: 100px 0 0 0;
        display: flex;
        align-items: center;
        .label {
            flex: 0 0 auto;
            width: 130px;
            margin-right: 10px;
        }
    }

    .btn-submit {
        margin-top: 20px;
    }
}
</style>
